<div class="card" style="height: 95%">
  <div class="card-body">
    <h4 class="header-title mb-0"><span class="text-danger me-1"><i class="fas fa-bug"></i></span>Vulnerability Breakdown by Severity</h4>
    <div id="cardCollpase19" class="collapse pt-3 show" dir="ltr">
      <div class="row mt-3 text-center">
        <div class="col-2">
          <p class="text-critical font-15 mb-1 text-truncate">Critical</p>
          <h4 class="text-critical">{{critical_count}}</h4>
        </div>
        <div class="col-2">
          <p class="text-danger font-15 mb-1 text-truncate">High</p>
          <h4 class="text-danger">{{high_count}}</h4>
        </div>
        <div class="col-2">
          <p class="text-warning font-15 mb-1 text-truncate">Medium</p>
          <h4 class="text-warning">{{medium_count}}</h4>
        </div>
        <div class="col-2">
          <p class="text-low font-15 mb-1 text-truncate">Low</p>
          <h4 class="text-low">{{low_count}}</h4>
        </div>
        <div class="col-2">
          <p class="text-primary font-15 mb-1 text-truncate">Info</p>
          <h4 class="text-primary">{{info_count}}</h4>
        </div>
        <div class="col-2">
          <p class="text-info font-15 mb-1 text-truncate">Unknown</p>
          <h4 class="text-info">{{unknown_count}}</h4>
        </div>
      </div>
      <div id="vulnerability-pie-chart" class="apex-charts"></div>
    </div>
  </div>
</div>
